<template>
	<view class="backgroundImg ">
		<view class="swiperList flex">

			<swiper class="swiper" :autoplay='autoplayBoolen' vertical=true circular :indicator-dots="indicatorDots"
				:duration="duration">
				<block v-for="(item,i) in shareList" :key="i">
					<swiper-item>
						<view class="swiper-item uni-bg-red flex">
							<image class="noticeImg" src="../../static/会员卡首页2/矩形 141.png" mode=""></image>
                            <text class="font-overflow" style="color: #fff;font-size: 30rpx;max-width: 380rpx;">{{item.userName }}发布了视频领取了奖励 </text>
				
						</view>

					</swiper-item>
				</block>

			</swiper>

		</view>


		<!-- 每日疯抢 -->
		<view class="dailyFlashSale ">
			<!-- <view class="flex-between">
				<view class="flex-start-center">

					<image class="fireSell" src="../../static/会员卡营销用户端/今日疯抢.png" mode="scaleToFill"></image>
					<cc-countdown style="margin-left: 10rpx;" color="#FFF" background-color="red" splitorColor="red"
						:showColon="true" :showDay="false" :day="0" :hour="24" :minute="0" :second="0"
						@timeup="timeup"></cc-countdown>
				</view>
				<sunui-navbar style="width: 300rpx;" v-if="tabList.length>=1" :items="tabList" lineHeight="0rpx"
					:isCenter="true" :currentIndex="navIndex" padding="2rpx" activeColor="rgb(0, 0, 0)" :size="70"
					activeLineBg="rgb(255, 0, 0)" textAlign="center" activeLineWidth="100%"
					activeDirection="space-between" activeLineHeight="0rpx" bgColor="transparent" :margin="30"
					@change="getChange"></sunui-navbar>

			</view> -->
			<view class="dailyFlashSaleList ">
				<block v-for="(item,index) in list" :key="index">
					<view class="flex-around" style="margin-bottom: 10rpx;"  v-if="index<3">
						<image class="dailyFlashSaleImg" style="margin-right: 10rpx; " :src="item.host_img[0]" mode="">
						</image>
						<view class="">
							<view style="width: 450rpx;" class="font-overflow2 margin-bottom_10rpx">
								<text style="font-weight: 700;">{{item.name}}</text>
							</view>
							<!-- 拼团 -->
							<view class="teamworkContainer flex-betweens">
								<view class="group">
									<text>5人团</text>
								</view>
								<view class="spliced">
									<text>已拼32份</text>
								</view>
							</view>


							<!-- 价格 -->
							<view class="price margin-bottom_10rpx ">

								<view class=" flex-betweens" style="color: rgb(150, 150, 150); font-size: 24rpx;;">
									<view class="economize flex "><text
											style="color: #fff;">已省{{(item.market_price-item.price).toFixed(2)}}元</text>
											<view class="triangle">
											
											</view>
									</view>
						            <view class="buy flex" @click="buyCk()">
						            	立即开团
						            </view>
								</view>

							</view>

							<view style="color: rgb(255, 0, 0); padding-left: 10rpx;"
								class="font-weight  flex-start-center">
								￥{{item.price}} <text
									style="color:rgb(151, 151, 151); font-size: 24rpx; margin-left: 10rpx;">单买￥{{item.market_price}}</text>
							</view>

						</view>
					</view>

				</block>
			</view>


		</view>
		<!-- 领取优惠券 -->
		<sunui-popup ref="receiveCouponPopup">
			<template v-slot:content>
		
				<view class="receiveCouponContain ">
		
					<view class="top flex-between">
						<view class="">
		
						</view>
						<text>请选择收货地址</text>
						<uni-icons @click='closeWriteOffIcon' class="uniIcon" type="clear" size="30"
							style="color: #07070791;">
						</uni-icons>
					</view>
		
					<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit"
						@down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
						<scroll-view v-if="list.length" :scroll-y="true" style="height: 800rpx;">
							<block v-for="(i,index) in listAddress" :key="index">
								<view class="flex-columns address-card" >
									<view class="flex-between p-bottom20">
										<view class="flex-align-center">
											<view class="font32 p-around15">{{i.name}}</view>
											<view class="font32 p-around15">{{i.phone}}</view>
											<!-- defaultNot =“是否默认 1.是 2.否”) -->
											<view class="v-default" v-if="i.status == 1">默认</view>
										</view>
										<radio-group @change="e=>radioChange(e,i.id)">
											<label class="uni-list-cell uni-list-cell-pd">
												<view>
													<radio style="transform:scale(0.7)" :value="String(index)"
														:checked="i.id == current" />
												</view>
										
											</label>
										</radio-group>
										<!-- <view class="v-label">{{i.label}}</view> -->
									</view>
									<view class="flex-top-start address-bottom">
										<view class="font-overflow flex1 ">{{ i.province_name }} {{ i.city_name }}
											{{ i.county_name }}
											{{ i.address }}
										</view>
										
									
								
									</view>
									
								</view>
		
							</block>
						</scroll-view>
					</mescroll-body>
		
		
		
				</view>
		
			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				duration: 1000,
				indicatorDots: false,
				autoplayBoolen: true,
				token: uni.getStorageSync('login').token,
				list: [],
				classifyList: [],
				
				listAddress:[],
				shareList: [{
					userName: '小明小明小明小明小明',

				}, {
					userName: '小红',

				}, ],
				windowHeight: '',
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				navIndex: 0,
				tabList: [],
				detailInfo: [{
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			
			getChange(e) {
				this.navIndex = e
			},
			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.receiveCouponPopup.close()
			},
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.addressList,
					data: {
						page: scroll.num,
						limit: 100,
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
			
				})
			
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.current=result.data[0].id
					this.mescroll.endByPage(result.data.length, this.$sun.pagingSum(10, 10));
					if (scroll.num == 1) this.listAddress = [];
					this.listAddress = this.listAddress.concat(result.data);
				
				}
			},
			// 立即购买
			buyCk(){
				
				// this.$refs.receiveCouponPopup.show({
				// 	anim: 'bottom',
				// 	position: 'bottom',
				// 	shadeClose: false, //false使用户不能点击其它关闭页面
				// 	topclose: false,
				// 	zIndex: 99999
				// });
				// this.$sun.navGo('/pages/addressManagement/addressManagement')
			},
			radioChange(evt,id) {
				console.log(evt)
				// 0 消费扣款 1 余额充值 2开通套餐卡
				
				this.current = id
				this.defaultAddress(id)
			},
			// 设为默认
			async defaultAddress(id, type) {
			
				const result = await this.$http.post({
					url: this.$api.setDefault,
					data: {
						id: id,
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
			
				})
				if (result.code == 0) {
					this.mescroll?.resetUpScroll();
					this.$sun.toast(result.msg, 'none')
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			async init() {
				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						page: 1,
						limit: 1000,

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})


				if (result.code == 0) {


					result.data.list.forEach((item) => {
						item.host_img = item.host_img.split(',').map((item) => item.trim());
					})
					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				}
				const resClass = await this.$http.post({
					url: this.$api.classifyList,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resClass.code == 0) {



					console.log(resClass.data)

					this.classifyList = resClass.data

					this.tabList = this.classifyList.map((item) => {
						return {
							name: item.name,
							id: item.id
						}
					})
					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.backgroundImg {
		padding: 23rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url('../../static/会员卡营销用户端/拓客引流限时拼团横版海报banner.png');
		height: 100vh;
	}
	.address-card {
		padding: 30rpx;
		border-bottom: 2rpx solid #f7f7f7;
	
		.v-default,
		.v-label {
			display: inline-block;
			padding: 4rpx 10rpx;
			border-radius: 4rpx;
			margin-left: 16rpx;
		}
	
		.v-default {
			background-color: #ffeff3;
			color: #da4369;
		}
	
		.v-label {
			background-color: #f4f6ff;
			color: #799ce8;
		}
	
		.address-bottom {
			view {
				margin: 0 15rpx;
				color: #929292;
			}
	
			text {
				font-size: 28rpx;
				color: #666;
				padding: 0 16rpx;
			}
		}
	}
   .receiveCouponContain {
   	background-color: #fff;
   	height: 50vh;
   	height: auto;
   	overflow-x: auto;
   
   
   	.top {
   		padding: 30rpx 0;
   		width: 100%;
   
   		text {
   			color: rgb(0, 0, 0);
   			font-size: 36rpx;
   			font-weight: 400;
   		}
   	}
   
   	.content {
   
   		width: 698rpx;
   		height: auto;
   		overflow-x: auto;
   		border-radius: 20rpx;
   		margin-bottom: 20rpx;
   		background: rgb(255, 242, 242);
   
   		.positionCoupon {
   			padding: 8rpx;
   			width: 154rpx;
   			height: 50rpx;
   			border-radius: 20rpx 0rpx 20rpx 0rpx;
   			color: rgb(255, 0, 0);
   			background: rgb(255, 219, 219);
   			font-size: 24rpx;
   		}
   
   		.couponPrice {
   			padding: 20rpx 26rpx;
   
   			.left {
   				margin-right: 32rpx;
   			}
   
   			.claimNow {
   				width: 144rpx;
   				height: 58rpx;
   				border-radius: 25rpx;
   				color: #fff;
   				background: rgb(255, 0, 0);
   			}
   		}
   	}
   
   	.bottom {
   
   		border-radius: 600rpx;
   		width: 662rpx;
   		height: 96rpx;
   		box-shadow: 0px 4px 4px 0px rgba(28, 197, 45, 0.2);
   		background: rgb(255, 0, 0);
   		color: #fff;
   		position: fixed;
   		bottom: 20rpx;
   	}
   }
	.v-p-share {
		padding: 2rpx 2rpx 0 2rpx;

		.v-m-width {
			margin-right: 40rpx;

			.pt_img {
				width: 50rpx;
				height: 50rpx;
				margin-right: -30rpx;
				border-radius: 50%;
			}
		}

		.v-share-friend {
			text {
				color: #294d7d;
				font-size: 24rpx;
				padding-right: 50rpx;
			}

			view {
				color: #ffffff;
				width: 154rpx;
				height: 58rpx;
			}
		}

		.v-share-friend2 {
			text {
				color: #294d7d;
				font-size: 24rpx;
			}
		}
	}

	page {
		background-color: #fe322f;
	}

	.swiperList {

		padding-top: 160rpx;



		.swiper {
			margin-bottom: 10rpx;
			border-radius: 30rpx;

			width: 682rpx;
			height: 76rpx;


			background: rgb(253, 131, 31);


		}



	}

	.dailyFlashSale {
		padding: 16rpx;
		margin-top: 20rpx;
		// width: 694rpx;

		border-radius: 10px;

		background: linear-gradient(180.00deg, rgb(255, 234, 234), rgb(255, 255, 255) 33.588%, rgb(255, 255, 255) 100%);

		.fireImg {
			width: 40.74rpx;
			height: 44.86rpx;
		}

		.fireSell {
			width: 148rpx;
			height: 38rpx;
		}

		.dailyFlashSaleList {
			margin-top: 25rpx;

			.dailyFlashSaleImg {

				width: 217rpx;
				height: 217rpx;

			}

			.teamworkContainer {
				width: 200rpx;
				height: 40rpx;
				box-sizing: border-box;
				border: 1px solid rgb(255, 207, 213);
				background: rgb(255, 255, 255);
				margin-bottom: 10rpx;

				.group {
					background: rgb(247, 231, 233);
					width: 76rpx;
					height: 36rpx;
					line-height: 36rpx;
					color: rgb(228, 72, 54);
					padding-left: 5rpx;
				}

				.spliced {

					line-height: 36rpx;
					height: 36rpx;
					line-height: 36rpx;
					color: rgb(255, 40, 15);
					padding-right: 5rpx;
				}
			}

			.economize {
				/* 矩形 1725 */
				position: relative;
				width: 152rpx;
				height: 44rpx;
				border-radius: 8rpx;

				background: linear-gradient(180.00deg, rgb(235, 108, 36), rgb(249, 111, 44) 100%);

				.triangle {
					position: absolute;
					top: 45rpx;
					left: 28rpx;
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;
					border-top: 8rpx solid  rgb(235, 108, 36),;
					/* 可以设置为任何你想要的颜色 */
				}

			}
			.buy {
				width: 140rpx;
				height: 52rpx;
				border-radius: 148rpx;
				color: #ffffff;
				font-size: 24rpx;
				background: linear-gradient(96.84deg, rgb(230, 86, 68) 0.783%,rgb(235, 122, 61) 99.397%);
			}

			.rob {
				width: 450rpx;
				height: 56rpx;
				border-radius: 20rpx;

				background: rgb(255, 244, 242);
			}


		}
	}

	.swiper-item {
		.noticeImg {
			margin-right: 10rpx;
			height: 24px;
			width: 24px;
		}

		width: 682rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
</style>